//博客的头部导航链接
var Style = require('./../../assets/css/essay.scss')
require('./../../assets/js/essay.js')
var React = require('react');
//引如一个自己通过link内置属性定义的组件，省去多次写activeclass
var Link = require('react-router').Link;
//引入一个树的组件
import {Treebeard} from 'react-treebeard';
//moment插件引入
var moment = require('moment');

class Essay extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            getDataTree:[]
        };
        this.getPages = this.getPages.bind(this);
        this.getData2 = this.getData2.bind(this)
    }
    componentDidMount() {
        fetch('http://localhost:3000/cate/list')
            .then((response)=> {
                if (response.status >= 400) {
                    throw new Error("Bad response from server");
                }
                return response.json();
            })
            .then((stories)=> {
                var treeHtml = '<ul class="tree">';
                stories.map((item,i)=>{
                    treeHtml += `<li class="treeParent">
                    ${item.title}`
                    if(item.children.length != 0){
                        treeHtml += `<span class="badge">${item.children.length}</span>
                        <ul>`
                        item.children.map((items,i)=>{
                            treeHtml += `<li class='treeChilder'>${items.title}
                                            <span class="badge">00</span>
                                        </li>
                                        `
                        })
                        treeHtml += '</ul>'
                    }else{
                        treeHtml += '</li>'
                    }
                })
                treeHtml += '</ul>'
                const getDataTree = treeHtml;
                this.setState({
                    getDataTree
                })
            });
            var vm = this;
            function getData(page) {
                var page = page?page:1
                $.ajax({
                    type: "POSt",
                    url: "http://localhost:3000/content/list",
                    data:{
                        page:page
                    },
                    success: (msg)=>{
                        const getDataContent = msg;
                        vm.setState({
                            getDataContent
                        })   
                    }
                });
            }
            getData()
    }
    //切换内容
    getData2(page) {
        var page = page?page:1
        $.ajax({
            type: "POSt",
            url: "http://localhost:3000/content/list",
            data:{
                page:page
            },
            success: (msg)=>{
                const getDataContent = msg;
                this.setState({
                    getDataContent
                })   
            }
        });
    }
    //切换页码
    getPages(item){
        var pages = [];  
        for(var i = 0; i < item; i++){  
            pages.push(<li key={i}><a data-page={i+1} onClick={(e)=>{
                if(this.state.getDataContent.page != e.target.dataset.page){
                    this.getData2(e.target.dataset.page)
                }
            }}>{i+1}</a></li>)
        }
        return pages;  
    }
    render() {
        
        var text = []
        if(this.state.getDataTree && this.state.getDataContent) {
            return (
                <div>
                    <div className='container animated fadeIn' >
                        <div className='row'>
                            {/*填充区*/}
                            <div style={{height:'80px'}}></div>
                            <div className='col-lg-3 col-md-3 col-sm-4' >
                            <h4>所有文章：</h4>
                                {
                                    <div dangerouslySetInnerHTML={{__html:this.state.getDataTree}}></div>
                                }
                            </div>
                            <div className='col-lg-9 col-md-9 col-sm-8'>
                                {
                                    this.state.getDataContent.rows.map((item,i)=>{
                                        return (
                                            <div key={i} className="col-lg-4 content-yu">
                                                <h2>{item.title}</h2>
                                                <p>{item.otherTitle}</p>
                                                <a className="text-danger" href="javascript:void(0);">{moment(item.date).toNow(true)}</a>
                                                <p><Link data-date={item.date} data-id={item._id} data-index={i} className="primary" onClick={(e)=>{
                                                        
                                                    }} role="button"
                                                    to={{
                                                        pathname:`/${moment(item.date).format('L')}/${item.title}`,
                                                        state:{
                                                            id:item._id,
                                                            listId:i,
                                                            count: this.state.getDataContent.rows
                                                        }
                                                    }} 
                                                    >阅读全文 »</Link>
                                                </p>
                                            </div>
                                        )
                                    })
                                    
                                }
                            </div>
                            </div>
                            <div className="container">
                                <div className="row" style={{textAlign:"center"}}>
                                    <nav aria-label="Page navigation" className="page-yu">
                                        <ul className="pagination">
                                            <li>
                                                {/*向上翻转*/}
                                                <a aria-label="Previous" onClick={()=>{
                                                    if(this.state.getDataContent.page>1){
                                                        {/*默认字符串需要使用parseInt转型*/}
                                                        this.getData2(parseInt(this.state.getDataContent.page)-1)
                                                    }
                                                }}>
                                                <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>
                                            {
                                                this.getPages(this.state.getDataContent.pages)
                                            }
                                            <li>
                                                {/*向下翻转*/}
                                                <a aria-label="Next" onClick={()=>{
                                                    if(this.state.getDataContent.page<this.state.getDataContent.pages){
                                                        this.getData2(parseInt(this.state.getDataContent.page)+1)
                                                    }
                                                }}>
                                                <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </ul>
                                    </nav>
                            </div>
                        </div>
                    </div>
                </div>
            )
        }
            return(<div>数据加载中</div>)
        
    }
}

module.exports = Essay;